<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { message } from "ant-design-vue";
import { CheckCircleOutlined } from "@ant-design/icons-vue";
import {
  addSpaceUsingPost,
  editSpaceUsingPost,
  getSpaceVoByIdUsingGet,
} from "@/api/spaceController";
import { useRoute, useRouter } from "vue-router";
import { SPACE_LEVEL_OPTIONS } from "@/constants/space";

const router = useRouter();
const route = useRoute();
const space = ref<API.SpaceVO>();
const spaceForm = reactive<API.SpaceAddRequest>({});
const formVisible = ref(true);
const submitting = ref(false);

// 定价方案数据
const pricingPlans = reactive([
  {
    name: "基础空间",
    price: "0",
    features: ["5GB 存储空间", "单个文件上限100MB", "基础支持", "最多3个空间"],
    featured: false,
  },
  {
    name: "专业空间",
    price: "29",
    features: [
      "50GB 存储空间",
      "单个文件上限2GB",
      "优先支持",
      "无限空间",
      "自定义域名",
    ],
    featured: true,
  },
  {
    name: "企业空间",
    price: "99",
    features: [
      "1TB 存储空间",
      "单个文件上限10GB",
      "24/7专属支持",
      "团队协作",
      "高级分析",
    ],
    featured: false,
  },
]);

// 表单提交
const handleSubmit = async () => {
  if (submitting.value) return;
  submitting.value = true;

  try {
    const apiMethod = route.query?.id ? editSpaceUsingPost : addSpaceUsingPost;
    const res = await apiMethod({
      id: space.value?.id, // 编辑时携带ID
      ...spaceForm,
    });

    if (res.data.code === 0 && res.data.data) {
      message.success(route.query?.id ? "修改成功" : "创建成功");
      router.push({ path: `/space/${res.data.data}` });
    } else {
      message.error(res.data.message || "操作失败");
    }
  } catch (e: any) {
    message.error(`操作失败: ${e.message}`);
  } finally {
    submitting.value = false;
  }
};

// 获取已有空间数据
const getOldSpace = async () => {
  const id = route.query?.id;
  if (!id) return;

  try {
    const res = await getSpaceVoByIdUsingGet({ id });
    if (res.data.code === 0 && res.data.data) {
      const data = res.data.data;
      space.value = data;
      // 填充表单
      spaceForm.spaceName = data.spaceName;
      spaceForm.spaceLevel = data.spaceLevel;
      formVisible.value = true;
    }
  } catch (e) {
    message.error("获取空间数据失败");
  }
};

onMounted(() => {
  getOldSpace();
});
</script>

<template>
  <div class="upload-container">
    <!-- 上传主区域 -->
    <div class="upload-wrapper">
      <div class="header-glow"></div>

      <h2 class="upload-title">
        <span class="title-gradient">
          {{ route.query?.id ? "📷 空间编辑中心" : "📷 空间创作中心" }}
        </span>
      </h2>

      <!-- 空间表单 -->
      <transition name="form-slide">
        <a-form
            :model="spaceForm"
            class="creative-form"
            v-if="formVisible"
            @submit.prevent="handleSubmit"
        >
          <div class="form-grid">
            <a-form-item name="spaceName" class="form-item">
              <a-input
                  v-model:value="spaceForm.spaceName"
                  placeholder="空间名称"
                  class="neon-input"
                  allow-clear
              >
                <template #prefix>
                  <span class="input-icon">🏷️</span>
                </template>
              </a-input>
            </a-form-item>

            <a-form-item name="spaceLevel" class="form-item">
              <a-select
                  v-model:value="spaceForm.spaceLevel"
                  placeholder="选择空间级别"
                  :options="SPACE_LEVEL_OPTIONS"
                  class="neon-select"
              >
                <template #suffixIcon>
                  <span class="select-icon">📚</span>
                </template>
              </a-select>
            </a-form-item>

            <a-form-item class="submit-item">
              <button
                  class="creative-btn"
                  type="submit"
                  :disabled="submitting"
              >
                <span class="btn-text">
                  {{
                    submitting
                        ? "处理中..."
                        : route.query?.id
                            ? "保存修改"
                            : "立即创建"
                  }}
                </span>
                <div class="hover-effect"></div>
              </button>
            </a-form-item>
          </div>
        </a-form>
      </transition>

      <div class="upload-tips">
        <span class="hotkey-tip">
          ✨ 小贴士：不得利用空间从事违规活动
        </span>
      </div>
    </div>

    <!-- 定价方案 -->
    <section class="pricing-section">
      <h2 class="section-title">空间级别介绍</h2>
      <a-row :gutter="[24, 24]" class="price-cards">
        <a-col
            :xs="24"
            :sm="12"
            :lg="8"
            v-for="(plan, index) in pricingPlans"
            :key="index"
        >
          <div class="price-card" :class="{ featured: plan.featured }">
            <div class="price-header">
              <h3>{{ plan.name }}</h3>
              <div class="price">
                <span class="currency">¥</span>
                <span class="amount">{{ plan.price }}</span>
                <span class="period">/月</span>
              </div>
            </div>
            <a-divider class="custom-divider" />
            <ul class="plan-features">
              <li v-for="(feature, fIndex) in plan.features" :key="fIndex">
                <CheckCircleOutlined class="feature-icon" />
                <span>{{ feature }}</span>
              </li>
            </ul>
            <a-button
                :type="plan.featured ? 'primary' : 'default'"
                block
                size="large"
                class="plan-button"
            >
              {{ plan.price === "0" ? "免费使用" : "立即订阅" }}
            </a-button>
          </div>
        </a-col>
      </a-row>
    </section>
  </div>
</template>

<style scoped lang="less">
/* 保持原有样式不变 */
@import "@/assets/variable.less";

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.upload-container {
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(
      135deg,
      darken(@background-color-light, 5%) 0%,
      @background-color-light 100%
  );
  position: relative;
  overflow-x: hidden;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 10%,
        fade(@primary-color, 5%) 0%,
        transparent 40%
    );
    z-index: 0;
  }
}

.upload-wrapper {
  background: @white;
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: 0 12px 32px fade(@black, 8%);
  position: relative;
  z-index: 1;
  margin-bottom: 3rem;
  transition: transform 0.3s @ease-base-out;

  &:hover {
    transform: translateY(-2px);
  }
}

.header-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  width: 120%;
  height: 180px;
  background: radial-gradient(
      circle at 50% 50%,
      fade(@primary-color, 15%) 0%,
      transparent 70%
  );
  transform: translateX(-50%);
  filter: blur(40px);
  opacity: 0.6;
  animation: gradientFlow 8s ease infinite;
}

.upload-title {
  text-align: center;
  margin-bottom: 2rem;

  .title-gradient {
    display: inline-block;
    font-size: 2rem;
    font-weight: 600;
    background: linear-gradient(45deg, @primary-color, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
    padding-bottom: 0.5rem;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 80%;
      height: 2px;
      background: linear-gradient(90deg, transparent, @primary-color, transparent);
      transform: translateX(-50%);
    }
  }
}

.creative-form {
  margin-top: 2rem;

  .form-grid {
    display: grid;
    gap: 1.5rem;
  }
}

.neon-input,
.neon-select {
  border-radius: 12px !important;
  transition: all 0.3s @ease-base-out !important;
  background: fade(@white, 98%) !important;

  &:hover {
    box-shadow: 0 0 0 2px fade(@primary-color, 15%) !important;
  }

  &:focus {
    box-shadow: 0 0 0 3px fade(@primary-color, 20%) !important;
  }

  .input-icon {
    color: fade(@text-color, 45%);
    margin-right: 8px;
  }
}

.creative-btn {
  position: relative;
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(45deg, @primary-color, #7c3aed);
  color: @white;
  font-weight: 500;
  overflow: hidden;
  transition: all 0.3s @ease-base-out;

  .btn-text {
    position: relative;
    z-index: 2;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, fade(@white, 15%), transparent);
    transition: left 0.6s @ease-base-out;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px fade(@primary-color, 20%);

    &::before {
      left: 100%;
    }
  }

  &:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }
}

.pricing-section {
  padding: 2rem 0;

  .section-title {
    text-align: center;
    font-size: 1.8rem;
    color: @text-color;
    margin-bottom: 3rem;
  }
}

.price-card {
  background: @white;
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 6px 24px fade(@black, 6%);
  transition: all 0.3s @ease-base-out;
  border: 1px solid fade(@border-color-base, 30%);

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px fade(@black, 10%);
  }

  &.featured {
    border-color: @primary-color;
    background: linear-gradient(135deg, fade(@primary-color, 3%), @white);

    .price-header h3 {
      color: @primary-color;
    }
  }

  .price-header {
    text-align: center;
    margin-bottom: 1.5rem;

    h3 {
      font-size: 1.4rem;
      color: @text-color;
      margin-bottom: 1rem;
    }

    .price {
      font-size: 2.5rem;
      font-weight: 600;
      color: @text-color;

      .currency {
        font-size: 1.2rem;
        vertical-align: super;
      }

      .period {
        font-size: 1rem;
        color: @text-color-secondary;
      }
    }
  }

  .custom-divider {
    margin: 1.5rem 0;
    border-color: fade(@border-color-base, 20%);
  }

  .plan-features {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;

    li {
      padding: 0.8rem 0;
      color: @text-color-secondary;
      display: flex;
      align-items: center;

      .feature-icon {
        color: @success-color;
        margin-right: 0.8rem;
        font-size: 1.1rem;
      }
    }
  }

  .plan-button {
    border-radius: 12px;
    height: 48px;
    font-weight: 500;
  }
}

@media (max-width: 768px) {
  .upload-container {
    padding: 1rem;
  }

  .upload-wrapper {
    padding: 1.5rem;
  }

  .price-cards {
    margin: 0 -8px;

    .ant-col {
      padding: 8px !important;
    }
  }

  .price-card {
    padding: 1.5rem;
  }
}
</style>
